import { Directive, Input } from '@angular/core';
const $: any = (window as any).$;
const d3: any = (window as any).d3;
@Directive({
    selector: '[appAttackChain]'
})
export class AttackChainDirective {
    // 七个攻击链阶段的数量；如：[{ count: 10, id: 1, desc: "侦查" }, { count: 60, id: 2, desc: "工具制作" }, { count: 50, id: 3, desc: "投送" }, { count: 40, id: 4, desc: "攻击渗透" }, { count: 30, id: 5, desc: "安装工具" }, { count: 20, id: 6, desc: "命令控制" }, { count: 10, id: 7, desc: "恶意活动" }];   
    @Input() chainData: any = [];
    // 绑定的元素标签的id属性；如：idObj = '#threat_block_id'
    @Input() idObj: string;
    @Input() hrefUrl: string;
    constructor() { }
    // that = this;
    /**
     *  画出svg的circle polyline text
     */
    svnWidth = 360;
    svnHeight = 250;
    //cicleColor = ['rgb(102,122,179)', 'rgb(0,147,221)', 'rgb(59,179,194)', 'rgb(104,185,46)', 'rgb(248,195,0)', 'rgb(231,120,23)', 'rgb(218,37,29)'];

    centerHeight = this.svnHeight / 2;
    cxStart = 45; //x轴方向的circle起点
    cxRadius = 6; //x轴方向的circle半径
    cyRadius = 3; //y轴方向的circle半径
    xpointsWidth = 33; //x轴方向的连线长度
    ypointsHeight = 30; //y轴方向的连线长度
    cicleColor = ['#ffef00', '#f5c400', '#ff9600', '#fc6205', '#fd4600', '#da281c', '#c6080d'];
    cxdata: any =[];
    // 在 svg 中插入 x轴方向的圆
    
    getCxdata() {
        let that = this;
        let xdata = [];
        for (let i = 0; i < 7; i++) {
            xdata[i] = { 'cx': that.cxStart + 45 * i, 'cy': that.centerHeight };
        }
        return xdata;
    }

    // 在 svg 中插入 x轴方向的连线
    xpoints: any = [];

    getXpoints() {
        let cxpoints = [];
        for (let i = 0; i < 6; i++) {
            cxpoints[i] = (this.cxdata[i].cx + this.cxRadius + 2) + "," + this.centerHeight + " " + (this.cxdata[i].cx + this.cxRadius + this.xpointsWidth) + "," + this.centerHeight;
        }
        return cxpoints;
    }

    // 在 svg 中插入y轴方向的圆
    cydata: any = [];
    getCydata() {
        let ydata = [];
        let that = this;
        ydata[0] = { 'cx': that.cxdata[0].cx, 'cy': (that.centerHeight - that.ypointsHeight - that.cxRadius - that.cyRadius) };
        ydata[1] = { 'cx': that.cxdata[1].cx, 'cy': (that.centerHeight + that.ypointsHeight + that.cxRadius + that.cyRadius) };
        ydata[2] = { 'cx': that.cxdata[2].cx, 'cy': ydata[0].cy - that.ypointsHeight };
        ydata[3] = { 'cx': that.cxdata[3].cx, 'cy': ydata[1].cy + that.ypointsHeight };
        ydata[4] = { 'cx': that.cxdata[4].cx, 'cy': ydata[0].cy - that.ypointsHeight };
        ydata[5] = { 'cx': that.cxdata[5].cx, 'cy': ydata[1].cy };
        ydata[6] = { 'cx': that.cxdata[6].cx, 'cy': ydata[0].cy };
        return ydata;
    }

    // 在 svg 中插入y轴方向的连线
    pointsVertical: any = [];

    getPointsVertical() {
        let cypoints = [];
        for (let i = 0; i < 7; i++) {
            if (i % 2 === 0) {
                cypoints[i] = (this.cxdata[i].cx) + "," + (this.cxdata[i].cy - this.cxRadius) + " " + (this.cxdata[i].cx) + "," + (this.cydata[i].cy + this.cyRadius);
            } else {
                cypoints[i] = (this.cxdata[i].cx) + "," + (this.cxdata[i].cy + this.cxRadius) + " " + (this.cxdata[i].cx) + "," + (this.cydata[i].cy - this.cyRadius);
            }
        }
        return cypoints;
    }

    // 在 svg 中插入text
    text: any =[];

    getxText() {
        let that = this;
        let xtext = [];

        let init_text=["侦查","工具制作","投送","攻击渗透","安装工具","命令控制","恶意活动"];

        for (let i = 0; i < 7; i++) {
            xtext[i] = { 'text': init_text[i], 'x': that.cydata[i].cx, 'y': 0 };
            if (i % 2 === 0)
                xtext[i].y = that.cydata[i].cy - that.cyRadius - 20;
            else
                xtext[i].y = that.cydata[i].cy + that.cyRadius + 30;

        }
        return xtext;
    }
    //创建svg的圆形标签
    createCircle(svg, cx, cy, r, fillcolor, strokecolor, strokewidth, strokeopacity) {
        svg.append('circle').attr({
            cx: cx,
            cy: cy,
            r: r
        }).style({
            fill: fillcolor,
            stroke: strokecolor,
            'stroke-width': strokewidth,
            'stroke-opacity': strokeopacity
        });
    }

    //创建svg的连线标签
    createPolyline(svg, pointsvertical, fillcolor, strokecolor, strokewidth, strokeopacity) {
        svg.append('polyline').attr({
            points: pointsvertical
        }).style({
            fill: fillcolor,
            stroke: strokecolor,
            'stroke-width': strokewidth,
            'stroke-opacity': strokeopacity
        });
    }

    //创建svg的text标签 
    createText(svg, textclass, x, y, fillcolor, fontsize, fontcolor, text) {
        svg.append('text').attr("class", textclass)
            .attr("x", x)
            .attr("y", y)
            .attr("fill", fillcolor)
            .style("font-size", fontsize)
            .style("cursor", "pointer")
            .style("font-color", fontcolor)
            .style("text-decoration", 'underline')
            .text(text);
    }
    //创建svg
    createBase(svg) {
        for (let i = 0; i < 7; i++) {
            this.createCircle(svg, this.cxdata[i].cx, this.cxdata[i].cy, this.cxRadius, '#fff', this.cicleColor[i], this.cxRadius - 1, 1);
            this.createCircle(svg, this.cydata[i].cx, this.cydata[i].cy, this.cyRadius, this.cicleColor[i], this.cicleColor[i], this.cyRadius, 1);

            // textclass标签类的不同的设置，方便给svg的text 添加 tspan换行
            this.createText(svg, "attach-chain-text" + i + " attach-chain-text", this.text[i].x-6, this.text[i].y, this.cicleColor[i], '14px', this.cicleColor[i], this.text[i].text);

            this.createPolyline(svg, this.pointsVertical[i], '#fff', this.cicleColor[i], 2, 1);

            if (i != 6) {
                this.createPolyline(svg, this.xpoints[i], '#fff', "rgb(137,137,137)", 2, 1);
            }

        }
    }
    baseSvg() {
        let that = this;
        let svg = d3.select(that.idObj).append('svg')
            .attr('class', 'attach-chain-svg')
            .attr('viewBox', '20 0 ' + that.svnWidth + ' ' + that.svnHeight)
            .attr('preserveAspectRatio', 'xMidYMid meet');

        this.createBase(svg);
        let attachChainText = $(".attach-chain-text");
        //给text添加点击事件
        attachChainText.on('click', (item) => {
            let index = attachChainText.index(item.target);
            this.toSpecial(index + 1, that.chainData[index].count);
        });

    };

    setSvgText(textFrom) {
        let that = this;
        if (textFrom) {
            for (let i = 0; i < textFrom.length; i++) {
                let textItem = d3.selectAll('text.attach-chain-text' + i);
                textItem.selectAll('tspan').remove();
                textItem.append("tspan")
                    .attr("x", that.text[i].x - that.cxRadius)
                    .attr("dy", '-0.6em');
                    //.text(textFrom[i].desc);
                textItem.append("tspan")
                    .attr("x", that.text[i].x - that.cxRadius)
                    .attr("dy", '1.0em')
                    .text(textFrom[i].count);
            }

        }

    };
    toSpecial(step, count) {
        // window.open('#/nti/event', '_self')
        window.open(this.hrefUrl, '_self');
        // TODO 带参数跳转
    };
    getData() {
        let params = {};
        // TODO
        // 自测
        let items = this.chainData;
        this.setSvgText(items);
    };

    ngAfterViewInit() {
        this.cxdata = this.getCxdata();
        this.xpoints = this.getXpoints();
        this.cydata = this.getCydata();
        this.pointsVertical = this.getPointsVertical();
        this.text = this.getxText();
        this.baseSvg();
        this.getData();
    }

}
